<template>
    <UxDialog :visible="!!visible" @close="visible && visible()">

        <div class="dialog-apply">
            <figure>
                <img src="@/assets/images/designer/designer-product-apply.png" alt="">
            </figure>
            <p>
                <strong>Apply current design to new product?</strong>
                <span>If the new product doesn't support certain print areas from the previous product, designs in those areas cannot be saved.</span>
            </p>

            <button @click="visible && visible('replace')">Apply</button>
            <button @click="visible && visible('normal')">Do not apply</button>

        </div>

    </UxDialog>
</template>
<script>
import { mapGetters, mapState } from "vuex";
export default {
    data () {
        return {
            visible: null,
        };
    },
    computed: {
        ...mapGetters("designer", {
            pieces: "getPieces",
        }),
    },
    methods: {
        check () {
            // 检查清晰度
            const noempty = this.pieces.filter(p => p.layers.length > 0);
            if (noempty.length == 0) {
                return Promise.resolve('normal');
            } else {
                return new Promise((resolve, reject) => {
                    this.visible = (type) => {
                        if (type) {
                            this.visible = null;
                            resolve(type)
                        } else {
                            this.visible = null;
                            reject('Cancel');
                        }
                    }
                })
            }

        }
    },
};
</script>
<style lang="scss" scoped>
.dialog-apply {
    width: 320px;
    height: 414px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 46px 14px 14px;

    figure {
        width: 160px;
        height: 68px;
        margin: 0 auto;
        img {
            width: 100%;
            height: 100%;
        }
    }

    p {
        flex: 1;
        margin-top: 46px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        & > strong {
            font-size: 14px;
            font-family: Roboto-Medium, Roboto;
            font-weight: 500;
            color: #000000;
            line-height: 22px;
        }
        & > span {
            margin-top: 16px;
            font-size: 14px;
            font-family: Roboto-Regular, Roboto;
            font-weight: 400;
            color: #000000;
            line-height: 22px;
        }
    }

    button {
        height: 38px;
        & + button {
            margin-top: 8px;
        }
    }
}
</style>
